<template>
  <div>
    <el-row gutter="20">
      <el-col :span="4">
        <el-tree ref="orgTree" :data="treeData" node-key="id" :expand-on-click-node="false" default-expand-all  highlight-current @node-click="treeClick"></el-tree>
      </el-col>
      <el-col :span="20">
        <el-popconfirm confirmButtonText='确定' cancelButtonText='取消'
                       icon="el-icon-info" iconColor="red"
                       title="确定同步企业微信通讯录?" @confirm="orgTongBu">
          <el-button slot="reference" type="warning" icon="el-icon-delete">同步企业微信通讯录</el-button>
        </el-popconfirm>

        <table class="mytable">
          <tr>
            <th style="width: 15%">组织名称</th>
            <th>{{activeTreeNode.label}}</th>
          </tr>
        </table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  data() {
    return {
      treeData : [],
      activeTreeNode : {},
    }
  },
  mounted() {
    this.loadOrgTree();
  },
  methods: {
    orgTongBu(){
      request({
        url: '/sys/org/orgtongbu',
        data: {orgId : 1}
      }).then(res => {
        if(res.code === "200"){
          this.$message.success(res.msg)
          this.loadOrgTree();
        }else{
          this.$message.error(res.msg);
        }
      })
    },
    loadOrgTree(){
      request({
        url: '/sys/org/orgtreedata',
        data: {orgId : 1}
      }).then(res => {
        const { data } = res
        this.treeData = data
        if(this.treeData.length > 0){
          this.activeTreeNode = this.treeData[0]
        }
      })
    },
    treeClick(treeNode){
      this.activeTreeNode = treeNode
    }
  }
}
</script>

<style scoped>
</style>
